<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/User.js'
import { RequestLogin, RequestRegister } from '@/api/Account.js' // 假设有注册接口
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 当前显示：login 或 register
const activeTab = ref('login')

// 登录表单
const loginForm = ref({
  username: '',
  password: ''
})

// 注册表单
const registerForm = ref({
  username: '',
  nickname: '',
  password: '',
  confirmPassword: ''
})

// 登录处理
async function handleLogin() {
  const { username, password } = loginForm.value
  if (username.length < 5 || password.length < 5) {
    ElMessage.error('用户名和密码不能小于5位')
    return
  }

  try {
    const res = await RequestLogin(username, password)
    if (res.data.code === 200) {
      userStore.setToken(res.headers['authorization'])
      userStore.setUserInfo(res.data.data)
      ElMessage.success('登录成功')
      router.push({ path: '/' })
    } else {
      ElMessage.error(res.data.message || '登录失败')
    }
  } catch (e) {
    ElMessage.error('登录失败，请检查网络或账户信息')
  }
}

// 注册处理
async function handleRegister() {
  const { username, nickname, password, confirmPassword } = registerForm.value

  if (username.length < 5) {
    ElMessage.error('用户名不能小于5位')
    return
  }
  if (password.length < 6) {
    ElMessage.error('密码不能小于6位')
    return
  }
  if (password !== confirmPassword) {
    ElMessage.error('两次密码输入不一致')
    return
  }

  try {
    const res = await RequestRegister(username,password);

    if (res.data.code === 200) {
      ElMessage.success('注册成功，即将自动登录')
      // 可选：自动登录
      setTimeout(() => {
        loginForm.value.username = username
        loginForm.value.password = password
        activeTab.value = 'login'
        handleLogin()
      }, 1000)
    } else {
      ElMessage.error(res.data.message || '注册失败')
    }
  } catch (e) {
    ElMessage.error('注册失败，请稍后重试')
  }
}
</script>

<template>
  <div class="login-wrapper">
    <!-- 背景装饰 -->
    <div class="background"></div>

    <!-- 登录/注册卡片 -->
    <div class="auth-card">
      <!-- 卡片头部：切换标签 -->
      <div class="tabs">
        <button
            :class="['tab', { active: activeTab === 'login' }]"
            @click="activeTab = 'login'"
        >
          登录
        </button>
        <button
            :class="['tab', { active: activeTab === 'register' }]"
            @click="activeTab = 'register'"
        >
          注册
        </button>
      </div>

      <!-- 登录表单 -->
      <div v-show="activeTab === 'login'" class="form-container">
        <h2>欢迎回来</h2>
        <p>请登录您的账户</p>

        <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            size="large"
            :prefix-icon="User"
        />
        <el-input
            v-model="loginForm.password"
            type="password"
            show-password
            placeholder="请输入密码"
            size="large"
            :prefix-icon="Lock"
            style="margin-top: 16px"
        />

        <el-button
            type="primary"
            size="large"
            @click="handleLogin"
            style="width: 100%; margin-top: 24px"
        >
          登 录
        </el-button>

        <div class="extra-link">
          没有账号？
          <el-button link type="primary" @click="activeTab = 'register'">
            去注册
          </el-button>
        </div>
      </div>

      <!-- 注册表单 -->
      <div v-show="activeTab === 'register'" class="form-container">
        <h2>创建账户</h2>
        <p>填写信息以注册新用户</p>

        <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名（至少5位）"
            size="large"
            :prefix-icon="User"
        />
        <el-input
            v-model="registerForm.password"
            type="password"
            show-password
            placeholder="请输入密码（至少6位）"
            size="large"
            :prefix-icon="Lock"
            style="margin-top: 16px"
        />
        <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            show-password
            placeholder="请确认密码"
            size="large"
            :prefix-icon="Checked"
            style="margin-top: 16px"
        />

        <el-button
            type="success"
            size="large"
            @click="handleRegister"
            style="width: 100%; margin-top: 24px"
        >
          注 册
        </el-button>

        <div class="extra-link">
          已有账号？
          <el-button link type="primary" @click="activeTab = 'login'">
            去登录
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.background::before,
.background::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(60px);
  z-index: -1;
}

.background::before {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.background::after {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -100px;
}

/* 认证卡片 */
.auth-card {
  width: 420px;
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
  z-index: 10;
}

.auth-card:hover {
  transform: translateY(-5px);
}

/* 切换标签 */
.tabs {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid #e4e4e4;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  background: #f7f7f7;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab.active {
  background: #667eea;
  color: white;
  font-weight: 500;
}

/* 表单内容 */
.form-container {
  animation: fadeIn 0.3s ease;
}

.form-container h2 {
  margin: 0 0 8px;
  color: #1f2d3d;
  font-size: 24px;
}

.form-container p {
  margin: 0 0 24px;
  color: #999;
  font-size: 14px;
}

.extra-link {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
</style>

<!-- 动画 -->
<style>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<!-- 图标（需在 main.js 注册） -->
<!-- import { User, Lock, ChatDotRound, Checked } from '@element-plus/icons-vue' -->
